<!-- 自动化实验-设备运行状态 -->
<template>
  <!-- 顶部搜索区 -->
  <div class="main-app" v-loading="loading">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 5px; margin-bottom: 15px;">
      <el-breadcrumb-item :to="{path:'/'}">{{$t('common.nav.home')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('common.nav.automationExperiment')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('common.nav.runningState')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题内容 -->
    <el-row :gutter="5">
      <el-col :span="5">
        <el-card shadow="hover" class="box-card">
          <div class="titie-bar"><span>{{$t('common.title.deviceRunningState')}}</span></div>
          <div style="height: 79.5vh;">
            <el-menu :default-active="activeMenuIndex" style="margin-top: 5px;" @select="handleSelect">
              <el-menu-item v-for="(item,index) in deviceStatusData" :key="index" :index="item.name" class="text-item">
                <i class="el-icon-data-line" style="margin: -2px 0 0 -10px;"></i>
                <span :style="'color:'+item.color+';'" slot="title">{{item.name}}: {{item.defaultValue}}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card shadow="hover" class="box-card">
          <div class="titie-bar"><span>{{$t('common.title.deviceOverview')}}</span></div>
          <div class="device-status-panal device-status-panal-bg"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { pageMixin } from "../../../mixins/index";
import {
  AllDeviceStatusData
} from "../../../api/device.js";
export default {
  // 页面公共变量
  data() {
    return {
      languages: '',              // 当前语言
      activeMenuIndex: "",        // 默认选中的菜单索引
      deviceStatusData: [],       // 设备运行状态数据
      timer: null,                // 计时器
    };
  },
  // 页面创建完成事件
  async created() {
    await this.init();
    this.autoRefreshData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    console.log('定时刷新数据计时器已清除');
  },
  // 页面相关方法
  methods: {
    // 初始化加载事件
    async init() {
      // 获取当前语言配置
      this.languages = localStorage.getItem('language') || 'zh_CN';

      // 获取统计数据
      await AllDeviceStatusData().then(res => {
        if (res.success === true) {
          // 设置数据源
          this.deviceStatusData = [];
          this.deviceStatusData = res.data;
          // 转换部分字段显示
          this.deviceStatusData.forEach((item) => {
            if (this.languages !== 'zh_CN') {
              item.name = item.tagName;
            }
            switch (item.defaultValue) {
              case "1": { item.defaultValue = this.$t('common.label.inStandby'); item.color = "#4281A4"; } break;
              case "2": { item.defaultValue = this.$t('common.label.inOperation'); item.color = "green"; } break;
              case "3": { item.defaultValue = this.$t('common.label.inFault'); item.color = "red"; } break;
              case "4": { item.defaultValue = this.$t('common.label.inOffline'); item.color = "blank"; } break;
            }
          });
        }
      });
    },
    // 定时刷新数据
    autoRefreshData() {
      console.log('定时刷新数据计时器已启用');
      this.timer = setInterval(async () => {
        this.init();
      }, 5000);
    },
    // 菜单选择事件
    handleSelect(index, indexPath) {
      clearTimeout(this.timer);   // 停止计时器
      switch(index) {
        case "AGV小车":
          this.$router.push(`experiment_running_state/autoGuideVehicle`);
          break;
        case "球磨机1":
          this.$router.push(`experiment_running_state/ballMillingStation`);
          break;
        case "球磨机2":
          this.$router.push(`experiment_running_state/ballMillingTwoStation`);
          break;
        case "下装炉":
          this.$router.push(`experiment_running_state/bottomFurnaceStation`);
          break;
        case "反应釜开盖机":
          this.$router.push(`experiment_running_state/capperStation`);
          break;
        case "试管开盖机":
          this.$router.push(`experiment_running_state/capperTwoStation`);
          break;
        case "坩埚转换位":
          this.$router.push(`experiment_running_state/crucibleConversionStation`);
          break;
        case "破碎机":
          this.$router.push(`experiment_running_state/crusherStation`);
          break;
        case "电化学测试":
          this.$router.push(`experiment_running_state/electroChemistryTestingStation`);
          break;
        case "高通量配粉":
          this.$router.push(`experiment_running_state/flourBlendingStation`);
          break;
        case "ROBOT机器人":
          this.$router.push(`experiment_running_state/jakaRobot`);
          break;
        case "磁力搅拌捏片蠕动":
          this.$router.push(`experiment_running_state/magneticPeristalticOthersStation`);
          break;
        case "烘箱":
          this.$router.push(`experiment_running_state/ovenStation`);
          break;
        case "封装机":
          this.$router.push(`experiment_running_state/packagingStation`);
          break;
        case "移液配比":
          this.$router.push(`experiment_running_state/pipetteDistributionStation`);
          break;
        case "刷料机":
          this.$router.push(`experiment_running_state/scrapingStation`);
          break;
        case "固液测试":
          this.$router.push(`experiment_running_state/solidLiquidTestingStation`);
          break;
        case "固固测试":
          this.$router.push(`experiment_running_state/solidSolidTestingStation`);
          break;
        case "XRD测试":
          this.$router.push(`experiment_running_state/xrdTestingStation`);
          break;
        case "压片机":
          this.$router.push(`experiment_running_state/tabletPressStation`);
          break;
        case "管式炉":
          this.$router.push(`experiment_running_state/tubeFurnaceStation`);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 顶部按钮绝对定位
.formbtn { text-align: right; }
// 数据表格区样式
.show-result { margin-top: 1%; }
/* 菜单样式 */
::v-deep .el-menu {border-right: solid 0px #e6e6e6;}
::v-deep .el-menu-item {height: 36px; font-size: 16px; line-height: 36px;}
// 区域标题样式
.titie-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: rgba(61, 171, 175, 1);
  margin: 5px 0 5px 0;
}
.titie-bar span {
  color: #0A0A0A;
  width: 80px;
  font-size: 22px;
  line-height: 32px;
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-left: 15px;
}

// 设备状态区域样式
.device-status-panal {
  height: 79.5vh;
  border-radius: 8px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.device-status-panal-bg {
  background-image: url(../../../assets/icon/automation_experiment/task_overview/device_status_bg.png);
}

.status-panal {
  height: 175px;
  border-radius: 8px;
  //box-shadow: 0px 2px 6px 0px rgba(39, 122, 160, 0.09);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.status-titie {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(61, 171, 175, 1);
  margin: 5px 0 0 5px;
  display: flex;
  flex-direction: column;

  span {
    color: #0A0A0A;
    font-size: 22px;
    white-space: nowrap;
    overflow-wrap: break-word;
    margin-top: -5px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
}
.status-value {
  text-align: center;
  margin-top: 18%;
  display: flex;
  flex-direction: column;

  span {
    color: rgba(1, 107, 110, 1);
    font-size: 38px;
    white-space: nowrap;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
  }
}
</style>
